<template>
  <div class="home">
      <el-container>
          <el-header>
              <div class="model-name">
                普陀反电诈案件监控系统
              </div>
            <div class="header-right">
              <div class="header-item" @click="changePW">
                修改密码
              </div>
              <div class="header-item" @click="logout">
                注销
              </div>
            </div>
          </el-header>
          <el-main>
            <div class="page-top-half">
                <div class="left-panel">
                  <div class="panel-half" style="height: 60%">
                    <tsgz @click.native="edit_first_table"></tsgz>
                  </div>
                  <div class="panel-half" style="height: 40%">
                    <gyfb @click.native="edit_first_table"></gyfb>
                  </div>
                </div>
                <div class="center-panel">
                  <echarts-Map @open="edit_first_table"></echarts-Map>
<!--                  <center-Wrap></center-Wrap>-->
                </div>
                <div class="right-panel" @click="edit_first_table" :style="{background: `rgba(5,22,47,0.56)`, width: '20%', cursor: 'pointer', border: '1px solid #042d55'}">
                  <el-button type="primary" size="mini" style="position: absolute; right: 0;" @click.stop="changeFlag=!changeFlag">切换</el-button>
                  <div class="col" v-show="changeFlag">
                    <jianmian></jianmian>
                  </div>
                  <div class="col" v-show="!changeFlag">
                    <beipian></beipian>
                  </div>
                  <div class="col">
                    <cal></cal>
                  </div>
                  <div class="col">
                    <pcs></pcs>
                  </div>
                </div>
                <div class="table-panel" style="display: flex;">
                  <bottomTable style="width: 60%;margin-right: 10px;"></bottomTable>
                  <bottomTable2 style="width: 40%"></bottomTable2>
                </div>
              </div>
          </el-main>
      </el-container>
<!--      <mapWrap ref="Lmap"></mapWrap>-->
      <common-Dialog ref="modifyPW_dialog" :customClass="'pw-dialog'">
          <template v-slot:content>
              <common-Form
                  :fieldsList="dialogfieldsList"
                  ref="tableForm"
                  :hideTable="true"
                  :hidePagination="true"
                  @change="pwFormChange"
              >

              </common-Form>
          </template>
        <template v-slot:footer>
          <div style="padding: 10px;">
            <span class="pw-comfirm-text" v-show="pwComfirm">两次输入的密码不一致</span>
            <el-button type="primary" @click.stop="editSubmit">修改</el-button>
          </div>
        </template>
      </common-Dialog>
      <common-Dialog ref="edit_first_table" :customClass="'edit_first_table-dialog'">
        <template v-slot:content>
          <common-Form
            :fieldsList="aaaField"
            :hideTable="false"
            :table-head="firstTableHead"
            :hidePagination="true"
            ref="edit_tableForm"
            :defaultData="defaultData"
          >
          </common-Form>
        </template>
        <template v-slot:footer>
          <div style="padding: 0px;">
            <el-button type="primary" @click.stop="closeEditDialog">关闭</el-button>
          </div>
        </template>
      </common-Dialog>

  </div>
</template>

<script>
// @ is an alias to /src
// import mapWrap from '@/components/map'
import commonDialog from '@/components/commonDialog/common.dialog'
import commonForm from '@/components/commonForm/commonForm.component'
import cityIssuesFeedback from '@/components/right/cityIssuesFeedback.component'
import gyUrl from '@/components/right/gyUrl.component'
import bottomTable from '@/components/bottom/bottomTable.component'
import bottomTable2 from '@/components/bottom/bottomTable2.component'
// import bottomTable from '@/components/bottom/bottomTable.component'
import warnType from '@/components/left/warnType.component'
import blackSample from '@/components/left/blackSample.component'
import centerWrap from '@/components/center/center.component'
import echartsMap from '@/components/center/echartsMap'
import tsgz from '@/components/left/tsgz.component'
import gyfb from '@/components/left/gyfb.component'
// import ssxg from '@/components/left/ssxg.component'
import jianmian from '@/components/right/jianmian.component'
import beipian from '@/components/right/beipian.component'
import cal from '@/components/right/cal.component'
import pcs from '@/components/right/pcs.component'

import Vue from 'vue'
import api from "@/api/common.api";
import loginApi from "@/api/login.api";
import _ from 'lodash'

export default {
  name: 'Home',
  components: {
    // mapWrap,
    commonDialog,
    commonForm,
    bottomTable,
    bottomTable2,
    // warnType,
    // blackSample,
    // bottomTable,
    // centerWrap,
    echartsMap,
    tsgz,
    gyfb,
    jianmian,
    beipian,
    pcs,
    cal,
    // ssxg,
    // hightDangerUser,
    // gyUrl,
  },
  data () {
      return {
        changeFlag: true,
        defaultData: [
          {
            '111': '反诈中心',
            '1112': '18326521220',
            '11122': '林丽柳',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '18726521260',
            '11122': '赵磊',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '17726521260',
            '11122': '李芬',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '15026521160',
            '11122': '凯利',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '13326521160',
            '11122': '刘照坤',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '18326521220',
            '11122': '林丽柳',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '18726521260',
            '11122': '赵磊',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '17726521260',
            '11122': '李芬',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '15026521160',
            '11122': '凯利',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '13326521160',
            '11122': '刘照坤',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
        ],
        firstTableHead: [
          {
            prop: '111',
            label: '下发部门'
          },
          {
            prop: '1112',
            label: '下发号码'
          },
          {
            prop: '11122',
            label: '下发姓名'
          },
          {
            prop: '111223',
            label: '下发类型'
          },
          {
            prop: '1112233',
            label: '下发时间',
            width: 200
          },
          {
            prop: '11122334',
            label: '数据类型'
          },
        ],
        aaaField: [],
        pwComfirm: false,
        statementShow: false,
        markerList: [],
        dialogTableHead: [
              {
                  prop: 'alarmTime',
                  label: '日期',
                  width: 160
              },
          ],
        dialogfieldsList: [
            {
                type: 'text',
                code: 'oldPass',
                name: '原密码',
                password: true,
                placeholder: '请输入原密码',
            },
            {
                type: 'text',
                code: 'newPass',
                name: '新密码',
                password: true,
                placeholder: '请输入新密码',
            },
            {
                type: 'text',
                code: 'comfirmPW',
                name: '确认密码',
                password: true,
                placeholder: '请确认新密码',
            },
        ],
      }
  },
  methods: {
      closeEditDialog () {
        this.$refs.edit_first_table.close();
      },
      edit_first_table () {
        this.$refs.edit_first_table.open({title: '详情', width: '60%'})
        this.$nextTick(()=>{
          this.$refs.edit_first_table.getTableData({}, [
            {
              bhrhm: '被害人号码',
              xm: '姓名',
              zplx: '诈骗类型',
              cjrdw: '出警人单位',
              pjsj: '派警时间',
              lxsj: '联系时间',
            }
          ])
        })
      },
      pwFormChange (e) {
        this.pwComfirm = false
        if(e.newPass !== e.comfirmPW && e.comfirmPW){
          this.pwComfirm = true
        }
      },
      editSubmit () {
        let form = _.clone(this.$refs.tableForm.form)
        this.pwFormChange(form)
        if(!form.comfirmPW || !form.oldPass || !form.newPass){
            return
        }
        if(form.comfirmPW !== form.newPass){
            return
        }
        delete form.comfirmPW
        loginApi.updatePass(form).then(res=>{
            if(res.msgCode === '200'){
                this.$message({
                    type: 'success',
                    message: '修改成功'
                });
                this.logout()
            }else{
                this.$message({
                    type: 'warning',
                    message: res.msgContent
                });
            }
        })
      },
      changePW () {
          this.$refs.modifyPW_dialog.open({title: '修改密码', width: '40%'})
      },
      logout () {
          this.$store.commit('logOut')
          this.$router.push({name: 'login'})
      },
      closeHandle(){
          this.statementShow = false
      },
      getJyzToMap () {
        api.getJyzToMap().then(res=>{
          res.content.forEach(v=>{
            this.addGasStationPoint(v)
          })
        })

      },
      jumpTo(){
        window.location = 'http://15.211.20.4:8089/model/#/'
      },
      drawPoint (list) {
        this.markerList.forEach(v=>{
          this.removePoint(v)
        })
        list.forEach(v=>{
          this.addPoint(v)
        })
        this.$refs.Lmap.setView([list[list.length - 1].wd,list[list.length - 1].jd], 16)
      },
      removePoint (point) {
          this.$refs.Lmap.removeLayer(point)
      },
      createDom (div) {
        var Profile = Vue.extend({
          template: div,
          data: function () {
            return {
              firstName: 'Walter',
              lastName: 'White',
              alias: 'Heisenberg'
            }
          },
          methods:{
            aaa(){

            }
          }
        })
        let dom = new Profile().$mount()
        return dom
      },
      addGasStationPoint (e) {
        if(!e){
          return false
        }
        let div = `<div class="capture-pop-wrap">
                          <div class="capture-pop-title">加油站</div>
                          <div class="capture-pop-item"><span>管理单位：</span>${e.GLDW}</div>
                          <div class="capture-pop-item"><span>场所名称：</span>${e.CSMC}</div>
                        </div>`
        // 创建 Profile 实例，并挂载到一个元素上。
        let dom = this.createDom(div)
        let point = {
          latlng: {lat: e.WD, lng: e.JD},
          dom: dom.$el
        }
        let icon = require('/src/assets/img/mapImg/gas_station.png')
        this.$refs.Lmap.addMarker(point, icon)
      },
      addPoint (e) {
        if(!e){
          return false
        }
        this.markerList.forEach(v=>{
          this.removePoint(v)
        })
        let div = `<div class="capture-pop-wrap">
                          <div class="capture-pop-title">抓拍信息</div>
                          <div class="capture-pop-item"><span>抓拍时间：</span>${e.passTime}</div>
                          <div class="capture-pop-item"><span>加油站：</span>${e.sbmc}</div>
                          <div class="capture-pop-item"><span>车牌号：</span>${e.plateNo}</div>
                          <div class="capture-pop-item"><span>抓拍照片：</span><img class="captrue-car-img" src="${e.sceneImg}" alt=""></div>
                        </div>`
        // 创建 Profile 实例，并挂载到一个元素上。
        let dom = this.createDom(div)
        let point = {
            latlng: {lat: e.wd, lng: e.jd},
            dom: dom.$el,
            zIndexOffset: 999
        }
        this.markerList.push(this.$refs.Lmap.addMarker(point))
      }
  },
  mounted () {
    // this.getJyzToMap()
    // {lat: 31.096331315335608, lng: 121.2143898010254}
  }
}
</script>
<style lang="stylus">
    .pw-dialog{
      width: 450px!important;
      height: 42%;
      .common-form-wrap{
        padding-left: 50px;
      }
      .pw-comfirm-text{
        position: absolute;
        bottom: 110px;
        left: 150px;
        font-size: 12px;
        color: red;
      }
    }
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateX(10px);
        opacity: 0;
    }
    .statement-dialog{
        width: 700px;
        background-image: url("../assets/img/dialogImg/tc-bg.png")
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 40px 30px;
        position: absolute;
        right: 40px;
        top: 100px;
        pointer-events: auto;
        .title{
            font-size: 55px;
            padding-bottom: 20px;
        }
        .content{
            font-size: 40px;
            text-indent: 90px;
            letter-spacing: 5px;
            line-height: 90px;
        }
    }
    .home{
      height: 100%;
      position: relative;
      color: #fff;
      background-image: url("../assets/img/bg/bg.png");
      background-size: 100% 100%;
    }
    .el-container{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
      pointer-events: none!important;
      .el-header {
          height: 80px !important;
          background-image: url("../assets/img/HuaiNanImg/header.png");
          background-size: 100% 250%;
          background-repeat: no-repeat;
          background-position: -20px top;
          display: flex;
          justify-content: center;
          align-items: center;
          .header-right{
            pointer-events: auto;
            position: absolute;
            right: 10px;
            top: 10px;
            display: flex;

            .header-item{
              color: #2e89c6;
              cursor: pointer;
              & + .header-item{
                margin-left: 10px;
              }
            }
          }
          .model-name{
              font-weight: 600;
              font-size: 30px;
              background: linear-gradient(to bottom, #e6f5f8, #a6e2eb);
              -webkit-background-clip: text;
              color: transparent;
              position: relative;
              letter-spacing: 8px;

              ::after{
                content: '1111111';
                display: block;
                font-size: 35px;
                position: absolute;
                left: 0; top: 0;
                text-shadow: 5px 5px 10px red;
              }
              /*-webkit-text-fill-color:transparent;*/
          }
          .header-back{
            position: absolute;
            right: 0;
            top: 0;
            width: 170px;
            height: 77px;
            text-align: center;
            background-image: url("../assets/img/title/-s-back.png");
            background-size: 100% 100%;

          }
          .header-info{
            position: absolute;
            right: 125px;
            top: 0;
            width: 170px;
            height: 77px;
            text-align: center;
            background-image: url("../assets/img/title/-s-back.png");
            background-size: 100% 100%;
          }
      }
      .el-main{
          //padding-top: 0;
          .page-top-half{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            position: relative;
          }
          .table-panel {
            width: 100%;
            position: absolute;
            height: 30%;
            bottom: 0;
          }
          .left-panel, .right-panel{
            width: 28%;
            height: 70%;
            pointer-events: auto!important;
            .panel-half{
              height: 50%;
              &+.panel-half{
                margin-top: 10px;
              }
            }
            .col {
              height: 30%;
            }
          }
          .center-panel{
            height: 70%;
            width: calc(54% - 20px);
            margin: 0 10px;
          }
      }
    }
    #map_wrap{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #003054;
      z-index: 0;
    }
    .panel-common-title{
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      padding-left: 25px;
      position: relative;
      display: flex;
      justify-content space-between;
      .title-text{
        font-weight: 400;

        background: linear-gradient(0deg, #6098FA 0%, #C7DBFD 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

      }
      &:before{
        content: '';
        position: absolute;
        left: 10px;
        top: 18px;
        width: 5px;
        height: 25px;
        background: #6CCEE6
      }
    }
    .custom-Table-wrap{
      height: 100%;
      .el-scrollbar__wrap{
        overflow-x: hidden;
        margin-right: -20px;
        margin-bottom: 0px!important;
      }
      .custom-table-head{
        display: flex;
      }
      .custom-table-content{
        height: calc(100% - 25px);
        .custom-table-tr{
          display: flex;
          padding: 5px 0;
          margin-top: 10px;
          cursor: pointer;
        }
      }
      .head-item, .custom-table-td{
        text-align: center;
      }
      .head-item{
        color: #5DDEFD;
      }
      .custom-table-tr:nth-child(1){
        background-image: linear-gradient(90deg, #E23AF5, #E23AF5, transparent, transparent);
      }
      .custom-table-tr:nth-child(2){
        background-image: linear-gradient(90deg, #8550F4, #8550F4, transparent, transparent);
      }
      .custom-table-tr:nth-child(3){
        background-image: linear-gradient(90deg, #1D3FD6, #1D3FD6, transparent, transparent);
      }
    }
</style>
